<template>
  <div>
    <div><img :src="bg"></div>
    <div class="claim_rule">
      <div class="result_title">活动规则</div>
      <div class="editor" v-html="editor_data"></div>
      <div class="coupon_btn" :class="isShow?'':'disable_btn'" @click="getCoupon">领取优惠券</div>
    </div>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>
<script>
import { openPage } from '@/utils/utils'
import small from '@/smallapp/small'
import { getCouponConfig, getCoupon } from '@/api/user/member/memberApi'
import SmallLogin from "@/components/SmallLogin/smallLogin.vue";

export default {
  components: {
    SmallLogin,
  },
  data() {
    return {
      // userPhoneNo: '',
      bg: '',
      editor_data: '',
      isShow: true
    }
  },
  created() {
    this.init()
  },
  mounted() {
    window.addEventListener('wxshow', (query) => {
      // console.log('dzUser', small.wxCache('dzUser'))
        // this.userPhoneNo = query.userPhoneNo || ''
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
    })
    // window.addEventListener('wxhide', () => {
    //   // console.log('wxhide', small.wxCache('dzUserPhoneNo'))
    //   small.wxCache('dzUserPhoneNo', null)
    // })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getCouponConfig().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.editor_data = res.data.editor_data || '<p>此处填写你需要展现的文字</p><p>点击领取优惠券按钮即可领取到优惠券</p>'
          this.bg = res.data.bg || 'https://img.wifenxiao.com/h5-wfx/images/user/mycoupon/commission_h_bg.jpg'
        }
      })
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    getCoupon() {
      if (this.isShow) {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        var params = {}
        // 定制 对接软通优惠券
        if (small.wxCache('dzUser')) {
          params.extraData = {...small.wxCache('dzUser')}
        }
        // console.log('params', params)
        getCoupon(params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            // this.JumpName('mycoupon')
            this.$Error("领取成功")
            setTimeout(() => {
              wx.redirectTo({
                url: `/user/pages/mycoupon/index?type=jump&targeturl=${encodeURIComponent(
                  '/mycoupon'
                )}`,
              })
            }, 1000)
          } else {
            this.isShow = false
            this.$Error("领取失败：" + res.msg)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.claim_rule {
  position:relative;
  top:-40px;
  border-radius: 20px;
  margin: 0 40px;
  padding:50px 40px;
  background:#fff;
  border:1px solid #f3f3f3;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow:0 5px 10px rgba(152,152,152,0.25);
  -webkit-box-shadow:0 5px 10px rgba(152,152,152,0.25);
  box-shadow:0 5px 10px rgba(152,152,152,0.25);
  .result_title {
    font-size:32px;
    font-weight:bold;
    color:#ff5000;
    text-align:center;
    background:url("https://img.wifenxiao.com/h5-wfx/images/user/mycoupon/claim_rule.png") center no-repeat;
    background-size:auto 90%;
  }
  .editor {
    margin: 30px 0;
    line-height: 50px;
    font-size: 26px;
    color: #666;
  }
  .coupon_btn {
    height:88px;
    line-height:88px;
    font-size:28px;
    text-align:center;
    color:#fff;
    border-radius:88px;
    background: -moz-linear-gradient(left, #ff7400,#ff4e00);
    background: -webkit-linear-gradient(left, #ff7400,#ff4e00);
    background: -o-linear-gradient(left, #ff7400,#ff4e00);
    background: -ms-linear-gradient(left, #ff7400,#ff4e00);
    background: linear-gradient(left, #ff7400,#ff4e00);
    box-shadow:0 3px 15px rgba(255,82,0,0.44);
    &.disable_btn {
      background:#c9cdd4;
      box-shadow: none;
    }
  }
}
</style>